<template>
<div class="dataset_create">
    <!-- 卡片视图区域 -->
    <el-card>
    <el-page-header @back="goBack" content="新增数据集" style="margin-bottom:50px">
    </el-page-header>
    <el-form label-width="110px" :model="form" :rules="rules" ref="form">
        <el-form-item label="名称">
            <el-input v-model="form.name"  clearable placeholder="请输入内容"  maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="简介"> 
            <el-input type="textarea" :rows="4"  v-model="form.introduce"  clearable placeholder="请输入数据集介绍"></el-input>
        </el-form-item>
        <el-form-item label="封面">
            <el-input v-model="form.photo"  clearable placeholder="请输入封面地址">
              <template slot="prepend">Http://</template>
            </el-input>
        </el-form-item>
    </el-form>
    <!-- 底部区域 -->
      <div style="text-align:center">
        <el-button-group style="align:center">
          <el-button size="medium" @click="backDataset">取消</el-button>
          <el-button type="primary" size="medium" @click="addDataset">确定</el-button>
        </el-button-group>
      </div>
    </el-card>
    
</div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
data () {
    return {
        form:[],
        rules: {
                name: [
                     { required: true, message: '请输入数据名称', trigger: 'blur' },
                     { min: 3, max: 10, message: '接口长度在 3 到 10 个字符', trigger: 'blur' }
                ],
        }
    }
},
//方法表示一个具体的操作，主要书写业务逻辑；
 methods: {
      goBack(){
          this.$router.back();
      },
      //添加接口
    addDataset(){
        let url = "http://39.106.31.187:8888/dataset/saveOrUpdate";
        post(url,this.form).then(resp => {
       // this.form = resp.data;
         this.$message.success("操作成功");
        // this.$router.push({
        //     path:'/interface/interface'
        // })
      this.goBack();
      });
    },
     //取消添加
    backDataset(){
        this.$router.back();
    }
 },
//请求数据
 created() {
      //1.获取路由参数
    //2.将参数提交给后台
    this.form = this.$route.query;
},

}
</script>

<style scoped>

</style>
